<template>
  <div class="FinancialManagement" v-loading="loading">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <div>
        <el-form-item label="商户订单号" class="myform-item">
          <el-input
            v-model="form.sh_order"
            placeholder="请输入发起人"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="日期范围" class="myform-item">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.tb_status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item style="margin-top: 50px">
          <el-button @click="onSearch" type="primary">搜 索</el-button>
          <!-- <el-button type="primary" @click="onRouterOne">导 出</el-button> -->
        </el-form-item>
      </div>
    </el-form>
     <div class="FinancialManagement-title">
        <!-- <template v-for="(item,index) in options">
          <div :key="index" :style="{background:item.color}" v-if="index!=0">{{item.label}}</div>
        </template> -->
        <div>统计:{{total}}</div>
    </div>
    <el-table :data="tableData" style="width: 100%" border :row-style="tableRowStyle">
      <template v-for="(item, index) in tableHeader">
        <el-table-column
          :label="item.name"
          :key="index"
          align="center"
          :prop="item.key"
        >
        </el-table-column>
      </template>
    </el-table>
    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postApirefundlist"
    />
  </div>
</template>

<script>
import { postApirefundlist } from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      date: "",
      options: [
        {
          label: "不限",
          value: 0,
        },
        {
          label: "支付宝金额小于淘宝金额",
          value: 1,
          color:"#fedbdb"
        },
        {
          label: "支付宝金额大于淘宝金额",
          value: 2,
          color:"#f7d6ff"
        },
        {
          label: "支付宝找不到淘宝订单",
          value: 3,
          color:"#d2fced"
        },
        {
          label: "支付宝纯支出",
          value: 4,
          color:"#d6e8ff"
        },
        {
          label: "找不到订单商品",
          value: 5,
          color:"#fce5c6"
        },
      ],
      form: {
        sh_order: "",
        datetime: "",
        tb_status: 0,
        page: 1,
        size: 10,
      },
      tableHeader: [
        {
          name: "id",
          key: "id",
        },
        {
          name: "线上订单号",
          key: "tb_order_number",
        },
        {
          name: "商品名称",
          key: "title",
        },
        {
          name: "支付宝到账时间",
          key: "pay_time",
        },
        {
          name: "对方账号",
          key: "counter_account",
        },
        {
          name: "收入金额",
          key: "income",
        },
        {
          name: "支出金额",
          key: "expenditure",
        },
        {
          name: "交易渠道",
          key: "source",
        },
        {
          name: "业务类型",
          key: "type",
        },
        {
          name: "备注",
          key: "remarks",
        },
        {
          name: "店铺名称",
          key: "shop_name",
        },
        {
          name: "款氏编码",
          key: "prodcut_number",
        },
        {
          name: "商品编码",
          key: "s_number",
        },
        {
          name: "成本价",
          key: "cb_price",
        },
        {
          name: "销售金额",
          key: "sales_amount",
        },
        {
          name: "销售成本",
          key: "sales_cb",
        },
        {
          name: "实发成本",
          key: "sf_cb",
        },
        {
          name: "销售毛利",
          key: "sales_profit",
        },
        {
          name: "销售毛利率",
          key: "sales_profit_s",
        },
        {
          name: "优惠金额",
          key: "preferential_amount",
        }
      ],
      tableData: [],
      total: 1,
    };
  },
  activated() {
    let form = this.form;
    this.postApirefundlist(form);
  },
  methods: {
    tableRowStyle({row, rowIndex}) {
      console.log("row",row)
        if (row.tb_status == 1) {
          return {background:'#fedbdb'};
        } else if (row.tb_status == 2) {
          return {background:'#f7d6ff'};
        }else if (row.tb_status == 3) {
          return {background:'#d2fced'};
        }else if (row.tb_status == 4) {
          return {background:'#d6e8ff'};
        }else if (row.tb_status == 5) {
          return {background:'#fce5c6'};
        }
      },
    // 采购列表
    async postApirefundlist(data) {
      this.form = data;
      postApirefundlist(data).then((res) => {
        console.log("采购列表", res);
        this.tableData = res.data;
        this.total = Number(res.total);
      });
    },
    // 搜索
    onSearch() {
      let date = this.date;
      if (date) {
        this.form.datetime = date[0]+'/'+date[1];
      }
      this.form.page = 1 
      this.form.size = 10
      this.postApirefundlist(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.FinancialManagement {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
   /deep/ .el-table tbody tr:hover > td {
    background-color: transparent;
  }
//   /deep/ tr {pointer-events: none;} 
  &-title{
    display: flex;
    >div{
      height:40px;
      line-height: 40px;
      // padding:0 30px
    }
    // >div:nth-last-child(1){
    //   margin-left:30rpx;
    // }
  }
}
</style>
